<template>
	<pager ref="pager" @loadData="loadData" auth bottombar background-color="#ffffff">

		<view class="safe-bottom flex flex-col w100">
			<view class="box1 flex flex-col w100 solid-bottom">
				<view class="title">我的设备</view>
				<view class="device flex flex-row align-c justify-c">
					<image class="ico1 flex-shrink" mode="aspectFit" :src="$assets.img('/static/images/ic028.png')">
					</image>
					<view class="info flex flex-col align-c justify-c">
						<view class="txt1">HBLD2超轻款</view>
						<view class="txt2">序列号：DL2333</view>
						<view @click="goQuestion" hover-class="click-view" class="btn1 flex align-c justify-c">查看更多</view>
					</view>
				</view>
			</view>
			<view class="box2 flex flex-col w100">
				<view class="title">售后门店</view>
				<view class="store flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="aspectFit" :src="$assets.img('/static/images/ic029.png')">
					</image>
					<view class="info flex flex-sub flex-col align-s justify-c">
						<view class="txt1 txt-breakall">互邦闵行区维修点</view>
						<view class="txt2 txt-breakall">门店地址：上海市闵行区都会路819弄99号2</view>
						<view class="txt3 txt-breakall">门店电话：400-060-1260</view>
					</view>
				</view>
			</view>
		</view>

		<template v-slot:bottombar>
			<view class="bottombar solid-top">
				<view class="bottombar-content">
					<view @click="callPhone" hover-class="click-view" class="phone-btn flex flex-row align-c justify-c">
						客服电话：400-060-1260
					</view>
				</view>
			</view>
		</template>
	</pager>
</template>
<script>
	export default {
		data() {
			return {};
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			callPhone() {
				const vm = this;
				uni.makePhoneCall({
					phoneNumber: '4000601260'
				})
			},
			goQuestion() {
				const vm = this;
				vm.$utils.openPage('/pkgQuestion/pages/index/index');
			},
		}
	};
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.bottombar {
		background-color: #ffffff;

		.bottombar-content {
			padding: 30rpx;

			.phone-btn {
				padding: 20rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #2D6CF0;
			}

		}
	}

	.box1 {
		padding: 30rpx;

		.title {
			font-size: 26rpx;
			color: #353535;
			font-weight: bold;
		}

		.device {
			padding: 56rpx;
			padding-bottom: 26rpx;

			.ico1 {
				border-radius: 20rpx;
				background-color: #f1f1f1;
				width: 200rpx;
				height: 200rpx;
				display: block;
			}

			.info {
				margin-left: 60rpx;

				.txt1 {
					font-size: 26rpx;
					color: #353535;
					line-height: 36rpx;
				}

				.txt2 {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #353535;
					line-height: 36rpx;
				}

				.btn1 {
					margin-top: 30rpx;
					background-color: #ffffff;
					width: 214rpx;
					height: 64rpx;
					border-radius: 48rpx;
					border: 1px solid #DCDCDC;
					font-size: 30rpx;
					color: #353535;
					font-weight: bold;
				}
			}

		}
	}

	.box2 {
		padding: 30rpx;

		.title {
			font-size: 26rpx;
			color: #353535;
			font-weight: bold;
		}

		.store {
			margin-top: 36rpx;

			.ico1 {
				border-radius: 20rpx;
				background-color: #f1f1f1;
				width: 100rpx;
				height: 100rpx;
				display: block;
			}

			.info {
				margin-left: 30rpx;

				.txt1 {
					font-size: 26rpx;
					font-weight: bold;
					color: #353535;
					line-height: 36rpx;
				}

				.txt2 {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #353535;
					line-height: 36rpx;
				}
				
				.txt3 {
					font-size: 26rpx;
					color: #353535;
					line-height: 36rpx;
				}

			}

		}
	}
</style>